<template>
  <div>
    <div class="Feature">
      <div class="Feature_title">
        <span class="Feature_title_span1">新商品</span>
        <span class="Feature_title_span2">查看更多</span>
      </div>
      <div class="Feature_data">
        <div class="Feature_data_list" v-for="(i,index) in ProductData" :key="index">
          <div class="Feature_data_list_div1" :style="{'backgroundImage': 'url(' + i.url + ')'}">
          </div>
          <div class="Feature_data_list_div2">
            <p class="Feature_data_list_div2_p1">{{ i.name }}</p>
            <p class="Feature_data_list_div2_p2">
              <span class="Feature_data_list_div2_span1">¥{{ i.price }}</span>
              <span class="Feature_data_list_div2_span2">月销量 {{ i.num }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Product",
  data() {
    return {
      ProductData: [
        {
          url: 'https://img.muji.com.cn/img/item/4550344508374_1260.jpg',
          name: '紧密编织 毛圈棉 拉链连帽衫',
          price: '258',
          num: '158'
        }, {
          url: 'https://img.muji.com.cn/img/item/4550344509623_1260.jpg',
          name: '紧密编织 毛圈棉 套头卫衣 21SS 新品',
          price: '228',
          num: '167'
        }, {
          url: 'https://img.muji.com.cn/img/item/4550344321461_02_1260.jpg',
          name: '棉水洗牛津 立领衬衫 21SS 新品',
          price: '178',
          num: '65'
        }, {
          url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms300/ea9ca3af-0dd3-4810-800b-30fea6ecf6e2.jpg',
          name: '香味蜡烛·迷你 木质香',
          price: '32',
          num: '17'
        }, {
          url: 'https://img.muji.com.cn/img/item/4550344385616_01_1260.jpg',
          name: '印度棉双罗纹编织 圆领长袖T恤',
          price: '98',
          num: '261'
        }, {
          url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms1190193/3d1ef684-9162-4f35-895a-395f1dc2120a.jpg',
          name: '煎饼果子风味薯条',
          price: '9',
          num: '58'
        }, {
          url: 'https://mujipywebblob.blob.core.chinacloudapi.cn/oms300/63aa910e-32e6-4115-b3e9-bfbf847cc407.jpg',
          name: '香味蜡烛·迷你 花香',
          price: '32',
          num: '64'
        }, {
          url: 'https://img.muji.com.cn/img/item/4550182271324_1260.jpg',
          name: '碱性电解水清洁剂',
          price: '38',
          num: '98'
        },
      ]
    }
  },
  mounted() {

  },
  methods: {}
}
</script>

<style lang="less" scoped>
.Feature {
  width: 78%;
  margin: 0 auto;

  .Feature_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 2%;
    margin-top: 2%;

    .Feature_title_span1 {
      font-size: 21px;
      color: black;
      font-weight: bold;
    }

    .Feature_title_span2 {
      font-size: 16px;
      color: #60b3fa;
      font-weight: bold;
    }
  }

  .Feature_data {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .Feature_data_list {
      width: 260px;
      height: auto;
      border-radius: 3px;
      margin-bottom: 2%;

      .Feature_data_list_div1 {
        background-repeat: no-repeat;
        background-size: 100%;
        height: 265px;
        border: 1px solid #e3e2e2;
      }

      .Feature_data_list_div2 {
        font-size: 16px;
        color: #000000;
        font-weight: bold;
        padding-top: 4%;

        .Feature_data_list_div2_p1 {
          font-size: 14px;
          color: black;
          font-weight: bold;
          margin-bottom: 4%;
        }

        .Feature_data_list_div2_p2 {
          display: flex;
          justify-content: space-between;

          .Feature_data_list_div2_span1 {
            font-size: 14px;
            color: #7f0019;
            font-weight: bold;
          }

          .Feature_data_list_div2_span2 {
            font-size: 14px;
            color: #979595;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>